<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>处方收费</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        .span_title {
            font-size: 16px;
            color: black;
            margin: 40px 25px;
        }

        .span_content {
            font-size: 15px;
            color: black;
        }

        .p_content {
            margin-top: 17px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-form-item" style="height: 60px;line-height: 60px;">
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">挂号单ID:</label>
        <div class="layui-input-inline">
            <input type="text" id="outpatientId" name="outpatient" placeholder="请输入挂号单ID" class="layui-input"
                   autocomplete="off"
                   style="width: 300px;">
        </div>
    </div>
    <div class="layui-form-item layui-inline" style="margin-left: 100px;">
        <button class="pear-btn pear-btn-md pear-btn-primary" onclick="queryOutpatient()">
            <i class="layui-icon layui-icon-search"></i>
            查询
        </button>
    </div>
    <span id="msg"></span>
</div>
<div id="content" style="display: none;">
    <div class="layui-bg-gray" style="padding: 10px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="height: 200px;">
                    <div class="layui-card-body">
                        <div class="layui-col-md6" style="height: 180px;">
                            <p class="p_content"><span class="span_title">挂号单号:</span><span id="outpatientNumber"
                                                                                            class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">科室名称:</span><span id="depName"
                                                                                            class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">就诊时间:</span><span id="seeDoctorTime"
                                                                                            class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">诊断信息:</span><span id="diagnosisInfo"
                                                                                            class="span_content"></span>
                            </p>
                        </div>
                        <div class="layui-col-md6" style="height: 180px;">
                            <p class="p_content"><span class="span_title">医生姓名:</span><span id="doctorName"
                                                                                            class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">患者名称:</span><span id="patientName"
                                                                                            class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">主诉:</span><span id="complaint"
                                                                                          class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">医生建议:</span><span id="proposal"
                                                                                            class="span_content"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-bg-gray" style="padding: 5px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" style="height: 50px;margin-left: 30px;line-height: 50px;">
                        <div style="margin-left: 65%">
                            订单总额:&nbsp;&nbsp;<span id="price" style="color: red;"></span>&nbsp;<span
                                style="color: red;">¥</span>
                            <button class="pear-btn pear-btn-md pear-btn-danger" onclick="cashPay()"
                                    style="margin-left: 20px;">
                                <i class="layui-icon layui-icon-templeate-1"></i>
                                现金
                            </button>
                            <button class="pear-btn pear-btn-md pear-btn-primary" onclick="weChatPay()"
                                    style="margin-left: 20px;">
                                <i class="layui-icon layui-icon-reply-fill"></i>
                                微信
                            </button>
                            <button class="pear-btn pear-btn-md pear-btn-warming" onclick="aliPay()"
                                    style="margin-left: 20px;">
                                <i class="layui-icon layui-icon-release"></i>
                                支付宝
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">[ 检查处方 ]&nbsp;[ 1 ]&nbsp;[ 处方总额
                ]&nbsp;:&nbsp;¥&nbsp;<span id="checkPrice"></span>
            </h2>
            <div class="layui-colla-content layui-show">
                <table id="pre-table" lay-filter="pre-table"></table>
            </div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">[ 药品处方 ]&nbsp;[ 2 ]&nbsp;[ 处方总额
                ]&nbsp;:&nbsp;¥&nbsp;<span id="drugPrice"></span>
            </h2>
            <div class="layui-colla-content layui-show">
                <table id="drugInfo-table" lay-filter="drugInfo-table"></table>
            </div>
        </div>
    </div>
</div>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'jquery'], function () {
        let table = layui.table;
        let $ = layui.jquery;

        let checkPrice;
        let checkTable;
        let trugTable;
        //挂号单查询
        window.queryOutpatient = function () {
            let outpatientId = $("#outpatientId").val();
            if (outpatientId.length == 0) {
                layer.msg("请输入挂号单ID", {
                    icon: 1,
                    time: 1000
                });
            }
            $.ajax({
                url: "/case/loadCaseInfo/" + outpatientId,
                method: "GET",
                success: function (result) {
                    let data = result.data;
                    if (data == null) {
                        $("#msg").css("color", "red");
                        $("#msg").text("查无此挂号单");
                    }

                    $("#outpatientNumber").text(data.outpatientId);
                    $("#depName").text(data.depName);
                    $("#seeDoctorTime").text(data.morbidity);
                    $("#diagnosisInfo").text(data.diagnosisInfo);

                    $("#doctorName").text(data.doctorName);
                    $("#patientName").text(data.patientName);
                    $("#complaint").text(data.complaint);
                    $("#proposal").text(data.proposal);

                    $("#msg").css("color", "green");
                    $("#msg").text("患者信息已显示");
                    $("#content").css("display", "block");

                    //加载检查处方数据表格
                    checkTable = table.render({
                        elem: '#pre-table',
                        url: '/prescription/loadInspectTable/' + outpatientId,
                        cols: [
                            [
                                {field: 'inspectId', title: '检查项ID', align: 'center', hide: true},
                                {field: 'inspectName', title: '项目名称', align: 'center'},
                                {field: 'company', title: '单位', align: 'center'},
                                {field: 'price', title: '单价', align: 'center'},
                                {field: 'money', title: '金额', align: 'center'},
                                {field: 'remark', title: '检查备注', align: 'center'},
                                {
                                    field: 'isPay', title: '状态', align: 'center', templet: function (d) {
                                        let str;
                                        if (d.isPay == 1) {
                                            str = '<font style="color: green">已缴费</font>';
                                        } else if (d.isPay == 2) {
                                            str = '<font style="color: red">未缴费</font>';
                                        }
                                        return str;
                                    }
                                }
                            ]
                        ],
                        page: false,
                        response: {
                            statusCode: 200
                        },
                        done: function () {
                            loadInspectMoney();
                        }
                    });

                    //加载检查处方总价
                    function loadInspectMoney() {
                        $.ajax({
                            url: "/prescription/loadInspectMoney/" + outpatientId,
                            dataType: "json",
                            method: "GET",
                            success: function (result) {
                                $("#checkPrice").text(result.data);
                                checkPrice = result.data;
                            }
                        })
                    }

                    //加载药用处方数据表格
                    trugTable = table.render({
                        elem: '#drugInfo-table',
                        url: '/prescription/loadDrugInfoTable/' + outpatientId,
                        cols: [
                            [
                                {field: 'drugId', title: '药品ID', align: 'center', hide: true},
                                {field: 'drugName', title: '药品名称', align: 'center'},
                                {field: 'number', title: '数量', align: 'center'},
                                {field: 'price', title: '单价', align: 'center'},
                                {field: 'money', title: '金额', align: 'center'},
                                {field: 'remark', title: '服用备注', align: 'center'},
                                {
                                    field: 'isPay', title: '状态', align: 'center', templet: function (d) {
                                        let str;
                                        if (d.isPay == 1) {
                                            str = '<font style="color: green">已缴费</font>';
                                        } else if (d.isPay == 2) {
                                            str = '<font style="color: red">未缴费</font>';
                                        }
                                        return str;
                                    }
                                }
                            ]
                        ],
                        page: false,
                        response: {
                            statusCode: 200
                        },
                        done: function () {
                            loadDrugMoney();
                        }
                    });

                    //加载药用处方总价
                    function loadDrugMoney() {
                        $.ajax({
                            url: "/prescription/loadDrugMoney/" + outpatientId,
                            dataType: "json",
                            method: "GET",
                            success: function (result) {
                                $("#drugPrice").text(result.data);
                                $("#price").text(parseFloat(checkPrice) + parseFloat(result.data));
                            }
                        })
                    }

                }
            })
        }


        let payType;
        window.cashPay = function () {
            payType = 1;
            createPayOrder();
        }

        window.weChatPay = function () {
            payType = 2;
            createPayOrder();
        }

        window.aliPay = function () {
            payType = 3;
            createPayOrder();
        }

        function createPayOrder() {
            let outpatientId = $("#outpatientNumber").text();
            let patientName = $("#patientName").text();
            let price = $("#price").text();

            layer.confirm('确定缴费吗?', {icon: 3, title: '提示'},function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "/caseOrder/addCaseOrder",
                    dataType: "json",
                    data: {"outpatientId": outpatientId, "patientName": patientName, "price": price, "payType": payType},
                    method: "POST",
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            //重载表格
                            trugTable.reload();
                            checkTable.reload();
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });

        }

    })
</script>
</body>
</html>